<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vModel的表单输入绑定</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
  <div id="app">
    <!-- input输入框: 
     v-mdoel 等价于 value + input 
     注意: 原生dom的$event为事件对象e, 组件的$event为组件的值value，比如el-input组件
    -->
    <div class="wrap">
      <h5 class="title">input输入框</h5>
      <input v-model="inputValue"/>
      <input :value="inputValue" @input="inputValue = $event.target.value"/>
      <p class="preview">绑定值为: {{ inputValue }}</p>
    </div>

    <!-- textarea输入框:
     v-mdoel 等价于 value + input
     -->
    <div class="wrap">
      <h5 class="title">textarea输入框</h5>
      <textarea v-model="textareaValue"></textarea>
      <textarea :value="textareaValue" @input="textareaValue = $event.target.value"></textarea>
      <p class="preview">绑定值为: {{ textareaValue }}</p>
    </div>

    <!-- radio单选框:
     v-mdoel 等价于 value + checked + change
     -->
    <div class="wrap">
      <h5 class="title">radio单选框</h5>
      <div class="radio-wrap">
        <input type="radio" id="radio1" value="one" v-model="radioValue"/>
        <label for="radio1">One</label>
      </div>
      <div class="radio-wrap">
        <input type="radio" id="radio2" value="two" v-model="radioValue"/>
        <label for="radio2">Two</label>
      </div>
      <!-- 模拟v-model -->
      <div class="radio-wrap">
        <input type="radio" id="radio3" value="three" :checked="radioValue === 'three'"  @change="radioValue = $event.target.value"/>
        <label for="radio3">Three</label>
      </div>
      <div class="radio-wrap">
        <input type="radio" id="radio4" value="four" :checked="radioValue === 'four'"  @change="radioValue = $event.target.value"/>
        <label for="radio4">Four</label>
      </div>
      <p class="preview">绑定值为: {{ radioValue }}</p>
    </div>

    <!-- checbox复选框:
     v-mdoel 等价于 value + change
     -->
     <!-- 原生v-model -->
    <div class="wrap">
     <h5 class="title">checkbox单选框</h5>
     <div class="checkbox-fa">
      <div class="checkbox-wrap">
        <input type="checkbox" id="checkbox1" value="one" v-model="checkboxValue1"/>
        <label for="checkbox1">One</label>
      </div>
      <div class="checkbox-wrap">
        <input type="checkbox" id="checkbox2" value="two" v-model="checkboxValue1"/>
        <label for="checkbox2">Two</label>
      </div>
      <p class="preview">绑定值为: {{ checkboxValue1 }}</p>
     </div>
     <!-- 模拟v-model -->
     <div class="checkbox-fa">
      <div class="checkbox-wrap">
        <input type="checkbox" id="checkbox3" value="three" :checked="checkboxValue2.includes('three')"  @change="changeCheckbox"/>
        <label for="checkbox3">Three</label>
      </div>
      <div class="checkbox-wrap">
        <input type="checkbox" id="checkbox4" value="four" :checked="checkboxValue2.includes('four')"  @change="changeCheckbox"/>
        <label for="checkbox4">Four</label>
      </div>
      <p class="preview">绑定值为: {{ checkboxValue2 }}</p>
     </div>
    </div>

    <!-- select 选择器(单选)
     v-model 等价于 value + change
     -->
     <div class="wrap">
      <h5 class="title">select选择器(单选)</h5>
      <select v-model="selectedValue" :class="{placeholder: !selectedValue}">
        <option value="" disabled selected>请选择</option>
        <option>One</option>
        <option>Two</option>
        <option>Three</option>
      </select>
      <!-- 模拟v-model -->
      <select :value="selectedValue" @change="changeSelect" :class="{placeholder: !selectedValue}">
        <option value="" disabled selected>请选择</option>
        <option>One</option>
        <option>Two</option>
        <option>Three</option>
      </select>
      <p class="preview">绑定值为: {{ selectedValue }}</p>
    </div>
  </div>
</body>
<style>
  .wrap {
    background: #f3f3f3;
    padding: 10px;
    margin-bottom: 16px;
  }
  .wrap .title {
    margin: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
    line-height: 2;
    font-size: 14px;
  }
  .wrap .preview {
    font-size: 13px;
  }
  .wrap .radio-wrap,
  .wrap .checkbox-fa .checkbox-wrap {
    display: inline-block;
    padding: 8px;
    width: 150px;
    background: #fefefe;
    border-radius: 5px;
  }
  .wrap .checkbox-fa {
    margin-top: 15px;
  }
  .wrap select {
    width: 150px;
  }
  .wrap select.placeholder {
    color: #999; /* 设置 placeholder 文本颜色 */
  }
  .wrap select.placeholder option:not([disabled]) {
    color: #000; /* 设置其他选项的文本颜色 */
  }
</style>
<script>
 var app = new Vue({
  el: '#app',
  data() {
    return {
      inputValue: '',
      textareaValue: '',
      radioValue: '',
      checkboxValue1: ['one'],
      checkboxValue2: ['four'],
      checkboxOptions: ['three', 'four'],
      selectedValue: '',
    }
  },
  methods: {
    // 模拟checkbox更新逻辑
    changeCheckbox(event) {
      const value = event.target.value;
      const isChecked = event.target.checked;

      if (isChecked) {
        // 如果选中，将值添加到数组中
        if (!this.checkboxValue2.includes(value)) {
          this.checkboxValue2.push(value);
        }
      } else {
        // 如果取消选中，将值从数组中移除
        this.checkboxValue2 = this.checkboxValue2.filter((item) => item !== value);
      }

      // 按照 checkboxOptions 的顺序重新排序
      this.checkboxValue2 = this.checkboxOptions.filter((item) =>
        this.checkboxValue2.includes(item)
      );
    },
    // 模拟选择框
    changeSelect(event) {
      this.selectedValue = event.target.value;
    },
  },
  mounted() {
  }
 })
</script>
</html>
